<template>
  <div class="apply">
    <div class="common-list">
      <table class="temp-table">
        <thead>
        <tr>
          <th style="width: 200px">审批主题</th>
          <th style="width: 200px">邮件主题</th>
          <th style="width: 100px">提交人</th>
          <th style="width: 120px">提交日期</th>
          <th style="width: 100px">审批结果</th>
        </tr>
        </thead>
        <tbody :style="{minHeight:HEIGHT-239+'px'}">
        <div v-for="item,index in list" :key="index">
          <tr>
            <td class="more" style="width: 200px;color: #2A97F9;cursor: pointer" title="查看审批详情" @click="editCheck(item.id)">
              {{item.approvalSubject}}
            </td>
            <td style="width: 200px" class="more">{{item.emailSubject}}</td>
            <td style="width: 100px" class="more">{{item.submitUserName}}</td>
            <td style="width: 120px">{{item.createTime}}</td>
            <td style="width: 100px" :class="`status${item.status}`">{{filterStatus(item.status)}}</td>
          </tr>
        </div>
        <tr class="empty-img" v-show="isEnd" style="background-color: #fff;border-bottom: 0">
          <td colspan="8" style="background-color: #fff;padding: 70px 0;">
            <img src="../../../../../../public/img/empty.png" alt="" style="width: 300px">
          </td>
        </tr>
        </tbody>
      </table>
      <el-pagination class="fixed"
                     background align="right"
                     @current-change="handleCurrentChange"
                     @size-change="handleSizeChange"
                     :current-page="nowPage"
                     :page-size="nowSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {getApprovalList} from '@/api/approval'
    export default {
        name: "index",
        data() {
            return {
                list: [],
                nowPage: 1,
                nowSize: 20,
                total: 0,
                isEnd: false,
                HEIGHT: document.documentElement.clientHeight,
            }
        },
        computed: {
            ...mapState(['common'])
        },
        created() {
            this.nowPage = this.common.commonPage;
            this.nowSize = this.common.commonPageSize;
        },
        mounted() {
            this.getList()
        },
        methods:{
            getList() {
                const params = {
                    searchType: 1,//（0-我提交的审批，1-由我审批）
                    statusType:1,//由我审批状态（0-待审批，1-已审批）
                    current: this.nowPage,
                    size: this.nowSize
                }
                getApprovalList(params).then(res => {
                    if (res.data.success) {
                        const result = res.data.data;
                        this.total = result.total;
                        this.isEnd = this.total == 0;
                        this.list = result.records;
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            editCheck(id) {
                //判断类型
                this.$store.commit('SET_EMAILPAGE', this.nowPage)
                this.$store.commit('SET_EMAILPAGESIZE', this.nowSize)
                this.$router.push({
                    path: '/mail/approval/exam/detail',
                    query: {
                        id:id
                    }
                })
            },
            handleSizeChange(size) { //  条数发生改变
                this.nowSize = size
                this.$store.commit('SET_COMMONPAGE', {page: this.nowPage, pageSize: this.nowSize});
                this.getList()
            },
            handleCurrentChange(page) { //页数发生变化
                this.nowPage = page
                this.$store.commit('SET_COMMONPAGE', {page: this.nowPage, pageSize: this.nowSize});
                this.getList()
            },
            filterStatus(type) {
                switch (parseInt(type)) {
                    case 0:
                        return '审批中';
                    case 1:
                        return '已撤销';
                    case 2:
                        return '已通过';
                    case 3:
                        return '不通过';
                    default:
                        return '-'
                }
            }
        }
    }
</script>

<style scoped>

</style>
